<template>
  <div class="sidebar">
    <el-menu
      router
      mode="vertical"
      :default-active="activeIndex"
      :text-color="'var(--text-color)'"
      :collapse-transition="false"
      @select="menuSelect">
      <el-menu-item :index="item.path" v-for="item in list" :key="item.name">
        {{ item.name }}
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script>
export default {
  name: 'sidebar',
  data() {
    return {
      activeIndex: '/system',
      list: [
        { path: '/system', name: '系统工具' },
        { path: '/picture', name: '图片工具' }
      ]
    }
  },
  watch: {
    /**
     * 监听路有变化
     */
    '$route.path': {
      handler(val) {
        this.activeIndex = `/${val.split('/')[1]}`
      },
      deep: true,
      immediate: true
    }
  },
  created() {},
  methods: {
    /**
     * 切换导航
     * @param {String} value 导航路径
     */
    menuSelect(value) {
      this.activeIndex = value
      this.$store.commit('SETCATEGORY', value.split('/')[1])
    }
  }
}
</script>
<style lang="scss" scoped>
.sidebar {
  width: 100%;
  height: 100%;
  /deep/.el-menu {
    height: 100%;
    width: 100%;
  }
}
</style>
